<template>
	<b-alert class="text-center m-1" :show="countDownValue" dismissible fade :variant="variant" @dismissed="alertDismissed" @dismiss-count-down="countDownChanged">
		<p>
			<slot></slot>
		</p>
		<small>
			{{ countDownValue }} 秒后自动关闭...
		</small>
	</b-alert>
</template>

<script>
	export default {
		name: "commons-alert",
		props: {
			dismissSecs: {
				type: Number,
				default: 5
			},
			dismissCountDown: {
				type: Number,
				default: 0,
			},
			variant: {
				type: String,
				default: "warning"
			}
		},
		data: function() {
			return {
				countDownValue: 0
			}
		},
		watch:{
			dismissCountDown: function(val){
				this.countDownValue = val
			}
		},
		methods: {
			countDownChanged(countDownValue) {
				this.countDownValue = countDownValue
			},
			alertDismissed(){
				this.$emit("alert-dismissed")
			}
		}
	}
</script>

<style>
</style>
